<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

<html>
	<head>
<!-- CSS Reset -->
<link type="text/css" rel="stylesheet" href="css/cssreset-min.css">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.ico" />

<!-- My CSS -->
<link type="text/css" rel="stylesheet" href="css/index.css">
<link type="text/css" rel="stylesheet" href="css/selectImageDialog.css">
<link type="text/css" rel="stylesheet" href="css/tools.css">
<link type="text/css" rel="stylesheet" href="css/accordianCSS.css">
<link type="text/css" rel="stylesheet" href="css/webkitscrollbar.css">
<link type="text/css" rel="stylesheet" href="css/customselect.css">

<!-- Web Fonts -->
<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet" type="text/css">

<!-- Setup Jquery -->
<link type="text/css" rel="stylesheet"
	href="vendor/jquery/css/dark-hive/jquery-ui-1.8.18.custom.css">
<script src="vendor/jquery/jquery-1.7.1.min.js"></script>
<script src="vendor/jquery/jquery-ui-1.8.18.custom.min.js"></script>

<!-- Setup Color Picker -->
<link rel="stylesheet" href="vendor/eyecon/css/colorpicker.css"
	type="text/css" />
<script type="text/javascript" src="vendor/eyecon/js/colorpicker.js"></script>

<!-- Setup Gritter -->
<!-- <link rel="stylesheet" href="vendor/gritter/css/jquery.gritter.css" -->
<!-- 	type="text/css" /> -->
<!-- <script type="text/javascript" src="vendor/gritter/js/jquery.gritter.min.js"></script> -->

<!-- Setup WebGL Libraries -->
<script src="vendor/three.js/Three.js"></script>
<script src="vendor/three.js/Detector.js"></script>
<!-- <script src="vendor/threex/THREEx.screenshot.js"></script> -->
<script src="vendor/threex/THREEx.FullScreen.js"></script>
<!-- <script src="vendor/threex/THREEx.WindowResize.js"></script> -->
<!-- <script src="vendor/threex/threex.dragpancontrols.js"></script> -->

<!-- Custom THREE.js -->
<script src="js/CustomVendor/TrackballControls.js"></script>

<!-- My Javascript Files -->
<script src="js/LoadSaveModeController.js"></script>
<script src="js/EffectsController.js"></script>
<script src="js/WindowController.js"></script>
<script src="js/CustomFlyControls.js"></script>
<script src="js/WebGLView2D.js"></script>
<script src="js/WebGLView3D.js"></script>
<script src="js/WebGLView.js"></script>
<script src="js/UniformManager.js"></script>
<script src="js/AppController.js"></script>
<script src="js/ParticleImage.js"></script>
<script src="js/Modes3DView.js"></script>
<script src="js/3DMode/ImageCarousel.js"></script>
<script src="js/3DMode/CarouselImagePlane.js"></script>
<script src="js/2DMode/WebGL2DTools.js"></script>
<script src="js/2DMode/Tools/RectangleSelector.js"></script>
<script src="js/2DMode/Tools/PencilTool.js"></script>
<script src="js/2DMode/Tools/SelectedArea.js"></script>
<script src="js/2DMode/Tools/MoveTool.js"></script>
<script src="js/2DMode/Tools/CropTool.js"></script>
<script src="js/2DMode/Tools/BucketTool.js"></script>
<script src="js/2DMode/Tools/ScaleHorizontalTool.js"></script>
<script src="js/2DMode/Tools/ScaleVerticalTool.js"></script>
<script src="js/2DMode/Tools/FlipImageVertical.js"></script>
<script src="js/2DMode/Tools/FlipImageHorizontal.js"></script>
<script src="js/2DMode/Tools/RotateClockwise.js"></script>
<script src="js/2DMode/Tools/RotateCounterClockwise.js"></script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-31371936-1']);
  _gaq.push(['_setDomainName', 'googlecode.com']);
  _gaq.push(['_setAllowLinker', true]);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<title>WebGL Img Editor</title>
</head>
	<body>
  <noscript>
    <p>Please enable JavaScript to use this program.</p>
  </noscript>
<!--   <div class="top_bar"> -->
<!--     <h1>CSCI 7000 - WebGl Based Image Editor</h1> -->
<!--   </div> -->
  <div class="side_bar">
    <div class="control_buttons">
      <button class="load mode2D">Load</button>
      <button class="save">Save</button>
      <button class="3dview">3D Mode</button>
    </div>
    <div class="accordian_wrapper mode2D">
	<div id="effects">
		<h3>
			<a href="#">Brightness / Contrast</a>
		</h3>
		<div>
			<div class="slideControlGroup">
				<p>Brightness</p>
				<div class="brigthnessSlider slider"></div>
			</div>
			<div class="slideControlGroup">
				<p>Contrast</p>
				<div class="contrastSlider slider"></div>
			</div>
			<div class="applyCancelButtons">
				<Button class="effectsApplyButton">Apply</Button>
				<Button class="effectsCancelButton">Cancel</Button>
			</div>
		</div>
		<h3>
			<a href="#">Hue / Saturation</a>
		</h3>
		<div>
			<div class="slideControlGroup">
				<p>Hue</p>
				<div class="hueSlider slider"></div>
			</div>
			<div class="slideControlGroup">
				<p>Saturation</p>
				<div class="saturationSlider slider"></div>
			</div>
			<div class="applyCancelButtons">
				<Button class="effectsApplyButton">Apply</Button>
				<Button class="effectsCancelButton">Cancel</Button>
			</div>
		</div>
		<h3>
			<a href="#">Denoise</a>
		</h3>
		<div>
			<div class="slideControlGroup">
				<p>Denoise</p>
				<div class="denoiseSlider slider"></div>
			</div>
			<div class="applyCancelButtons">
				<Button class="effectsApplyButton">Apply</Button>
				<Button class="effectsCancelButton">Cancel</Button>
			</div>
		</div>
		<h3>
			<a href="#">Swirl</a>
		</h3>
		<div>
			<div class="slideControlGroup">
				<p>Angle</p>
				<div class="swirlAngleSlider slider"></div>
			</div>
			<div class="slideControlGroup">
				<p>Radius</p>
				<div class="swirlRadiusSlider slider"></div>
			</div>
			<div class="applyCancelButtons">
				<Button class="effectsApplyButton">Apply</Button>
				<Button class="effectsCancelButton">Cancel</Button>
			</div>
		</div>
		<h3>
			<a href="#">Ink Effect</a>
		</h3>
		<div>
			<div class="slideControlGroup">
				<p>Strength</p>
				<div class="inkStrengthSlider slider"></div>
			</div>
			<div class="applyCancelButtons">
				<Button class="effectsApplyButton">Apply</Button>
				<Button class="effectsCancelButton">Cancel</Button>
			</div>
		</div>
		<h3>
			<a href="#">Painting</a>
		</h3>
		<div>
			<div class="slideControlGroup">
				<p>Strength</p>
				<div class="cartoonStrengthSlider slider"></div>
			</div>
			<div class="applyCancelButtons">
				<Button class="effectsApplyButton">Apply</Button>
				<Button class="effectsCancelButton">Cancel</Button>
			</div>
		</div>
		<h3>
			<a href="#">Color Map</a>
		</h3>
		<div>
			<div class="slideControlGroup">
				<p>Style</p>
				<select class="colorMapSelect">
					<option value='0'>Sepia</option>
					<option value='1'>Thermal</option>
					<option value='2'>Combustion</option>
					<option value='3'>Satellite</option>
					<option value='4'>Infrared</option>
					<option value='5'>Autotropic</option>
				</select>
			</div>
			<div class="applyCancelButtons">
				<Button class="effectsApplyButton">Apply</Button>
				<Button class="effectsCancelButton">Cancel</Button>
			</div>
		</div>
		<h3>
			<a href="#">Tools (Experimental)</a>
		</h3>
		<div>
			<div class="slideControlGroup">
				<div id="imageTools">
					<Button class="toolButton" title="Pencil Tool">
						<img src="images/tools/stock-tool-pencil-22.png" alt="move" />
					</Button>
					<Button class="toolButton" title="Rectangle Select">
						<img src="images/tools/stock-tool-rect-select-22.png" alt="Rec" />
					</Button>
					<Button class="toolButton" title="Crop Tool">
						<img src="images/tools/stock-tool-crop-22.png" alt="move" />
					</Button>
					<Button class="toolButton" title="Bucket Tool">
						<img src="images/tools/stock-tool-bucket-fill-22.png" alt="move" />
					</Button>
					<div class="toolControlSection paintBucketTool">
						<div class="slideControlGroup">
							<p class="bucketToolText">Tolerance : 50%</p>
							<div class="bucketToleranceSlider"></div>
						</div>
					</div>
					<div class="toolControlSection cropTool">
						<Button class="cropApply">Apply</Button>
					</div>
					<Button class="toolButton" title="Rotate Clockwiese 90 degrees">
						<img src="images/tools/stock-tool-rotate-clockwise-22.png"
							alt="roate" />
					</Button>
					<Button class="toolButton" title="Rotate Counter Clockwiese 90 degrees">
						<img src="images/tools/stock-tool-rotate-counter-clockwise-22.png" alt="rotate" />
					</Button>
					<Button class="toolButton" title="Flip Horizontal">
						<img src="images/tools/stock-tool-flip-hor-22.png" alt="flip hor" />
					</Button>
					<Button class="toolButton" title="Flip Vertical">
						<img src="images/tools/stock-tool-flip-vert-22.png" alt="flip vert" />
					</Button>
					<Button class="toolButton" title="Scale Horizontal">
						<img src="images/tools/stock-tool-scale-hor-22.png" alt="move" />
					</Button>
					<Button class="toolButton" title="Scale Vertical">
						<img src="images/tools/stock-tool-scale-vert-22.png" alt="move" />
					</Button>
					<div class="toolControlSection scaleHorizontal">
						<div class="slideControlGroup">
							<p class="scaleHorizontalText">Scale : 100%</p>
							<div class="scaleHorizontalSlider"></div>
						</div>
					</div>
					<div class="toolControlSection scaleVertical">
						<div class="slideControlGroup">
							<p class="scaleVerticalText">Scale : 100%</p>
							<div class="scaleVerticalSlider"></div>
						</div>
					</div>
				</div>
				<div id="colorSelector" title="Color Selector">
					<div style="background-color: #0000ff"></div>
				</div>
			</div>
		</div>
	</div>
</div>
    <div class="accordian_wrapper mode3D">
	<div id="modes3D">
		<h3>
			<a href="#">Particle Image</a>
		</h3>
		<div>
			<div class="slideControlGroup">
				<p>Density</p>
				<div class="particleDensitySlider slider"></div>
			</div>
			<div class="slideControlGroup">
				<p>Image</p>
				<div class="particleImageSlider slider"></div>
			</div>
		</div>
		<h3>
			<a href="#">3D Image Carousel</a>
		</h3>
		<div>
			<p>This is a image carousel </p>
		</div>
	</div>
</div>
  </div>
  <div class="main_view"></div>
</body>
	<div id="dialogs">
  <div class="selectImageDialog">
    <p>Select an image from below or upload your own.</p>
    <div class="dialog_image_wrapper">
      <div class="dialog_images">
      </div>
    </div>
    <center>
      <div class="upload">
        <input
          type="file"
          class="upload_file"
          name="upload_file"
          onchange="readURL(this);"
          accept="image/png,image/jpeg" /> <span id="upload_text">Upload
          Image</span>
      </div>
    </center>

    <p class="or_text">Or</p>

    <div class="dndZone">
      <div class="cell">
        <p>Drag and Drop Image Here</p>
      </div>
    </div>

  </div>
</div>
	<script type="x-shader/x-fragment" id="fragmentshader">
  
    #ifdef GL_ES
    precision highp float;
    #endif
    
	//Common
	uniform float width;
	uniform float height;
	uniform int mode;
    uniform sampler2D uSampler;

    varying vec2 vUv;

	// Brightness and Contrast
    uniform float brightness;
    uniform float contrast;
		
	// Hue and saturation
	uniform float hue;
	uniform float saturation;

	//Denoise
	uniform float denoiseExp;

	//Swirl
	uniform float radiusSwirl;
	uniform float angleSwirl;

	//Ink
	uniform float inkStrength;

	//Painting
	uniform float paintingStrength;

	//Tone Filter
	uniform sampler2D textureMap;
	uniform int toneMode;

	//Contrast Calculation
	vec3 contrastCalc(vec3 pixelColor)
	{
		pixelColor -= 0.5;
		pixelColor *= contrast;
		pixelColor += 0.5;
		return pixelColor;
	}


	//Brightness Calculation
	vec3 brightnessCalc(vec3 pixelColor)
	{
		pixelColor += brightness;
		return pixelColor;
	}

	//Hue Calculation
	vec3 hueCalculation(vec3 pixelColor)
	{
		float pi = hue * 3.1415926535897932384626;
		vec3 adjustment = (vec3(2.0 * cos(pi), -sqrt(3.0) * sin(pi) - cos(pi), sqrt(3.0) * sin(pi) - cos(pi)) + 1.0);		
		adjustment /= 3.0;
		pixelColor.rgb = vec3(
			dot(pixelColor, adjustment.xyz),
			dot(pixelColor, adjustment.zxy),
			dot(pixelColor, adjustment.yzx)
        );
		return pixelColor;
	}

	//Saturation calculation
	vec3 saturationCalculation(vec3 pixelColor)
	{
		float avg = (pixelColor.r + pixelColor.g + pixelColor.b)/3.0;
		pixelColor += (avg - pixelColor) * saturation;
		return pixelColor;
	}

	//Denoise filter
	vec3 denoiseCalc(vec3 pixelColor)
	{
		float total = 0.0;
		vec4 color = vec4(0.0);
		for(float i = -4.0; i <= 4.0 ; i += 1.0)
		{
			for(float j=-4.0; j <= 4.0 ; j+= 1.0)
			{
				vec4 pixel = texture2D( uSampler, vUv + vec2(i/width, j/height));
				float temp = 1.0 - abs(dot(pixel.rgb - pixelColor, vec3(0.25)));
				temp = pow(temp, denoiseExp);
				color += pixel * temp;
				total += temp;
			}
		}
		return (color / total).rgb;
	}

	//Based on http://www.geeks3d.com/20110428/shader-library-swirl-post-processing-filter-in-glsl/
	vec4 swirlCalc()
	{
		vec4 pixelColor;

		vec2 coord = vUv * vec2(width, height);
		
		vec2 center = vec2(0.5,0.5) * vec2(width, height);
		
		coord = coord - center;
		float distance = length(coord);
		if(distance < radiusSwirl){
			float percent = (radiusSwirl - distance) / radiusSwirl;
			float theta = percent * percent * angleSwirl;
			float s = sin(theta);
			float c = cos(theta);
			coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);
		}
		coord += center;
		
		pixelColor =  texture2D(uSampler, coord / vec2(width, height));

		//Deal with pixels outside of image
		vec2 clampedCoord = clamp(coord, vec2(0.0), vec2(width, height));
		if(coord != clampedCoord){
			pixelColor.a = max(0.0, 1.0 - length(coord - clampedCoord));
		}
		return pixelColor;
	}

	vec3 inkCalc(vec3 pixelColor)
	{
		vec2 dx = vec2(1.0 / width, 0.0);
		vec2 dy = vec2(0.0, 1.0 / height);
		float bigTotal = 0.0;
		float smallTotal = 0.0;
		vec3 bigAverage = vec3(0.0);
		vec3 smallAverage = vec3(0.0);
		for (float x = -2.0; x <= 2.0; x += 1.0) {
			for (float y = -2.0; y <= 2.0; y += 1.0) {
				vec3 sample = texture2D(uSampler, vUv + dx * x + dy * y).rgb;
				bigAverage += sample;
				bigTotal += 1.0;
				if (abs(x) + abs(y) < 2.0) {
					smallAverage += sample;
					smallTotal += 1.0;
				}
			}
		}
		vec3 edge = max(vec3(0.0), bigAverage / bigTotal - smallAverage / smallTotal);
		pixelColor = pixelColor - dot(edge, edge) * 100000.0 * inkStrength;
		return pixelColor;
	}

	vec3 paintingShader(vec3 pixelColor){
		pixelColor.r = float(int(pixelColor.r * paintingStrength))/paintingStrength;
		pixelColor.g = float(int(pixelColor.g * paintingStrength))/paintingStrength;
		pixelColor.b = float(int(pixelColor.b * paintingStrength))/paintingStrength;
		float total = 0.0;
		vec4 color = vec4(0.0);
		for(float i = -4.0; i <= 4.0 ; i += 1.0)
		{
			for(float j=-4.0; j <= 4.0 ; j+= 1.0)
			{
				vec4 pixel = texture2D( uSampler, vUv + vec2(i/width, j/height));
				float temp = 1.0 - abs(dot(pixel.rgb - pixelColor, vec3(0.25)));
				temp = pow(temp, 100.0);
				color += pixel * temp;
				total += temp;
			}
		}
		return (color / total).rgb;
	}

	vec3 sepiaFilter(vec3 pixelColor){
		vec3 color;
		color.r = dot(pixelColor, vec3(.393, .769, .189));
		color.g = dot(pixelColor, vec3(.349, .686, .168));
		color.b = dot(pixelColor, vec3(.272, .534, .131));
		return color*(1.0-distance(vUv,vec2(0.5,0.5))/0.707106781);
	}
	
	vec3 toneMap(vec3 pixelColor){
		return texture2D( textureMap , vec2(pixelColor.r , 0)).rgb;
	}

    void main()
    {
		//vec2 test = vec2(vTextureCoord, vTextureCoord);
		vec3 pixelColor = texture2D( uSampler, vUv ).rgb;
		
		if(mode == 0){
			pixelColor = contrastCalc(pixelColor);
			pixelColor = brightnessCalc(pixelColor);
		} else if(mode == 1){
			pixelColor = hueCalculation(pixelColor);
			pixelColor = saturationCalculation(pixelColor);
		} else if(mode == 2){
			pixelColor = denoiseCalc(pixelColor);
		} else if(mode == 3){
			gl_FragColor = swirlCalc();
			return;
		} else if(mode == 4){
			pixelColor = inkCalc(pixelColor);
		} else if(mode == 5){
			pixelColor = paintingShader(pixelColor);
		} else if(mode == 6){
			if(toneMode == 0)
				pixelColor = sepiaFilter(pixelColor);
			else
				pixelColor = toneMap(pixelColor);
		}

		//Set Color of pixel
		gl_FragColor = vec4(pixelColor,1.0);
    }
  
  </script>
<script
  type="x-shader/x-vertex"
  id="vertexshader">
    
    // switch on high precision floats
    #ifdef GL_ES
    precision highp float;
    #endif

    varying vec2 vUv;
    
    void main()
    {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
    
</script>
<script type="x-shader/x-fragment" id="particleFShader">
  
    #ifdef GL_ES
    precision highp float;
    #endif
    
	//Common
	uniform vec3 color;
	uniform sampler2D texture;

	varying vec3 vColor;

	void main() {

		gl_FragColor = vec4( color * vColor, 1.0 );
		gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );

	}
  
  </script>
<script type="x-shader/x-fragment" id="particleVShader">
  
    #ifdef GL_ES
    precision highp float;
    #endif
    
	//Common
	attribute float size;
	attribute vec3 ca;
	attribute vec2 posxy;

	uniform float time;
	uniform vec2 img_size;

	varying vec3 vColor;

	void main() {

		vColor = ca;

		vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

		//gl_PointSize = size;
		gl_PointSize = size * ( 300.0 / length( mvPosition.xyz ) );

		gl_Position = projectionMatrix * mvPosition;

		gl_Position.y += sin(posxy.x/img_size.x*2.0*3.14159+time/10000.0*2.0*3.14159)*10.0;
		gl_Position.x += sin(posxy.y/img_size.y*2.0*3.14159+time/10000.0*2.0*3.14159)*10.0;
		//gl_Position.z += sin(posxy.y/img_size.y*2.0*3.14159+time/10000.0*2.0*3.14159)*10.0;

		//gl_Position.x = cos(time/10000.0*2.0*3.14159)*gl_Position.x;
		//gl_Position.z = sin(time/10000.0*2.0*3.14159)*gl_Position.z;
	}
  
  </script>
<script type="x-shader/x-fragment" id="fragmentCropShader">
  
    #ifdef GL_ES
    precision highp float;
    #endif
    
	//Common
	uniform vec2 topLeft;
	uniform vec2 bottomRight;
	uniform vec2 size;
	//vec2 topLeft = vec2(0.25,0.25);
	//vec2 bottomRight = vec2(0.75,0.75);
	//vec2 size = vec2(1280, 800);

	varying vec2 vUv;
	
	float distance(vec2 v, vec2 w){
		return ((v.x - w.x)*(v.x - w.x) + (v.y - w.y)*(v.y - w.y));
	}

	int corner(vec2 v){
		v.x *= size.x;
		v.y *= size.y;
		float dis = 6.0;
		dis *= dis;
		vec2 c0 = vec2(bottomRight.x * size.x, bottomRight.y * size.y);
		if(distance(c0, v) <= dis)
			return 1;
		vec2 c1 = vec2(bottomRight.x * size.x, topLeft.y * size.y);
		if(distance(c1, v) <= dis)
			return 1;
		vec2 c2 = vec2(topLeft.x * size.x, topLeft.y * size.y);
		if(distance(c2, v) <= dis)
			return 1;
		vec2 c3 = vec2(topLeft.x * size.x, bottomRight.y * size.y);
		if(distance(c3, v) <= dis)
			return 1; 
		return 0;
	}

	void main() {
		//Draw Corners
		if(corner(vUv) == 1)
			gl_FragColor = vec4(0.0,0.0,0.0,0.5);
		
		//Draw Sides
		else if(vUv.x < bottomRight.x+1.0/size.x && vUv.x > bottomRight.x - 1.0/size.x && vUv.y < bottomRight.y && vUv.y > topLeft.y)
			gl_FragColor = vec4(1.0,1.0,1.0,1.0);
		else if(vUv.x < topLeft.x+1.0/size.x && vUv.x > topLeft.x - 1.0/size.x && vUv.y < bottomRight.y && vUv.y > topLeft.y)
			gl_FragColor = vec4(1.0,1.0,1.0,1.0);
		else if(vUv.y < topLeft.y+1.0/size.y && vUv.y > topLeft.y - 1.0/size.x && vUv.x < bottomRight.x && vUv.x > topLeft.x)
			gl_FragColor = vec4(1.0,1.0,1.0,1.0);
		else if(vUv.y < bottomRight.y+1.0/size.y && vUv.y > bottomRight.y - 1.0/size.x && vUv.x < bottomRight.x && vUv.x > topLeft.x)
			gl_FragColor = vec4(1.0,1.0,1.0,1.0);
		//Draw outside area
		else if(vUv.x > bottomRight.x || vUv.y > bottomRight.y || vUv.y < topLeft.y || vUv.x < topLeft.x)
			gl_FragColor = vec4(0.5,0.5,0.5,0.5);
		
		//Draw inside area
		else
			gl_FragColor = vec4(0.0,0.0,0.0,0.0);
	}
  
  </script>
<script
  type="x-shader/x-vertex"
  id="vertexCropShader">
    
    // switch on high precision floats
    #ifdef GL_ES
    precision highp float;
    #endif

    varying vec2 vUv;
    
    void main()
    {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
    
</script>
</html>
